import {UploadOutlined} from '@ant-design/icons';
import {
    ProForm,
    ProFormDependency,
    ProFormFieldSet,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
} from '@ant-design/pro-components';
import {useRequest} from '@umijs/max';
import {Button, Input, message, Upload} from 'antd';
import React from 'react';
import {queryCity, queryCurrent, queryProvince} from '../service';
import useStyles from './index.style';
import {FormValueType} from "@/pages/organization/user-list/components/UpdateForm";
import {UserListItem} from "@/pages/organization/user-list/data";
import {editUser} from "@/pages/organization/user-list/service";

const validatorPhone = (rule: any, value: string[], callback: (message?: string) => void) => {
    if (!value[0]) {
        callback('Please input your area code!');
    }
    if (!value[1]) {
        callback('Please input your phone number!');
    }
    callback();
};

const BaseView: React.FC = () => {
    const {styles} = useStyles();
    // 头像组件 方便以后独立，增加裁剪之类的功能
    const AvatarView = ({avatar}: { avatar: string }) => (
        <>
            <div className={styles.avatar_title}>头像</div>
            <div className={styles.avatar}>
                <img src={avatar} alt="avatar"/>
            </div>
            <Upload showUploadList={false}>
                <div className={styles.button_view}>
                    <Button>
                        <UploadOutlined/>
                        更换头像
                    </Button>
                </div>
            </Upload>
        </>
    );
    const {data: currentUser, loading} = useRequest(() => {
        return queryCurrent();
    });
    const getAvatarURL = () => {
        if (currentUser) {
            if (currentUser.avatar) {
                return currentUser.avatar;
            }
            const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
            return url;
        }
        return '';
    };
    const handleFinish = async (currentRow?: UserListItem) => {
        const hide = message.loading('正在更新基本信息');
        try {
            let res = await editUser({
                ...currentRow,
                // ...fields,
            });
            if (res?.success === false) {
                throw new Error(res.message);
            }
            console.log(res);
            hide();
            message.success('更新基本信息成功');
            return true;
        } catch (error) {
            hide();
            message.error('更新基本信息失败请重试！');
            return false;
        }
    };
    return (
        <div className={styles.baseView}>
            {loading ? null : (
                <>
                    <div className={styles.left}>
                        <ProForm
                            layout="vertical"
                            onFinish={handleFinish}
                            submitter={{
                                searchConfig: {
                                    submitText: '更新基本信息',
                                },
                                render: (_, dom) => dom[1],
                            }}
                            initialValues={{
                                ...currentUser,
                            }}
                            hideRequiredMark
                        >
                            <ProFormText
                                width="md"
                                name="userid"
                                label="userid"
                                hidden={true}
                            />
                            <ProFormText
                                width="md"
                                name="account"
                                label="账号"
                                disabled={true}
                            />
                            <ProFormText
                                width="md"
                                name="username"
                                label="昵称"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入您的昵称!',
                                    },
                                ]}
                            />
                            <ProFormText
                                width="md"
                                name="phone"
                                label="联系电话"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入您的手机号!',
                                    },
                                ]}
                            />
                            <ProFormText
                                width="md"
                                name="email"
                                label="邮箱"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入您的邮箱!',
                                    },
                                ]}
                            />

                            <ProFormText
                                width="md"
                                name="homePath"
                                label="SSH家目录"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入您的SSH家目录!',
                                    },
                                ]}
                            />

                            <ProFormText
                                width="md"
                                name="loginShell"
                                label="登录Shell"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入您的登录shell!',
                                    },
                                ]}
                            />

                            <ProFormTextArea
                                name="profile"
                                label="个人简介"
                                placeholder="个人简介"
                            />
                        </ProForm>
                    </div>
                </>
            )}
        </div>
    );
};
export default BaseView;
